<template>
    <div class="custom-table-container">
        <el-row style="float: right; margin-bottom: 20px">
            <el-tooltip class="item" effect="dark" content="刷新表格" placement="top">
                <el-button size="mini" circle icon="el-icon-refresh" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="表头配置" placement="top">
                <el-button size="mini" circle icon="el-icon-menu" @click="openConfigDialog" />
            </el-tooltip>
        </el-row>
        <el-table :data="tableData"
                  :border="border"
                  :header-cell-style="headerCellStyle"
                  @selection-change="handleRowSelectChange"
                  :ref="tableReference">
            <el-table-column type="selection" width="60" align="center"></el-table-column>
            <slot></slot>
            <el-table-column v-for="item in tableColumns"
                             :key="item.prop"
                             :label="item.label"
                             :width="item.width || null"
                             align="center"
                             :show-tooltip-when-overflow="true"
                             :prop="item.prop">
                <template slot-scope="scope">
                    <slot :name="item.prop"
                          :row="scope.row">{{scope.row[item.prop]}}
                    </slot>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right"
                             v-if="showOperate"
                             align="center">
                <template slot-scope="scope">
                    <slot name="operate" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表头配置 -->
        <el-dialog title="表头配置"
                   :visible.sync="tableHeaderConfig"
                   :close-on-click-modal="false"
                   width="50%">
            <el-form :model="form" label-width="100px">
                <el-row v-for="item in form.columns" :key="item.id">
                    <el-col :span="10">
                        <el-form-item label="表头名称：">
                            <el-input v-model="item.label"
                                      clearable
                                      size="small"
                                      placeholder="请输入表头名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="表头标识：">
                            <el-input v-model="item.prop"
                                      clearable
                                      size="small"
                                      placeholder="请输入表头标识"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="padding-left: 20px; padding-top: 6px">
                        <el-button type="primary" size="mini" @click="addNewConfig">添加</el-button>
                        <el-button type="danger" size="mini" @click="deleteColumn(item)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer">
                <el-button type="primary" @click="finishConfig">确 定</el-button>
                <el-button type="default" @click="tableHeaderConfig = false">取 消</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    import { nanoid } from 'nanoid'

    export default {
        name: "CustomNormalTable",
        props: {
            // 表格数据
            tableData: {
                type: Array,
                default: () => [
                    {attr1: '自定义数据1-1', attr2: '自定义数据1-2', attr3: '自定义数据1-3'},
                    {attr1: '自定义数据2-1', attr2: '自定义数据2-2', attr3: '自定义数据2-3'},
                    {attr1: '自定义数据3-1', attr2: '自定义数据3-2', attr3: '自定义数据3-3'},
                ]
            },
            // 表头配置
            tableColumns: {
                type: Array,
                default: () => []
            },
            // 是否显示操作栏
            showOperate: {
                type: Boolean,
                default: false
            },
            // DOM标识
            tableReference: {
                type: String,
                default: 'el-table'
            },
            // 表格边框
            border: {
                type: Boolean,
                default: false
            },
            // 自定义表头样式
            headerCellStyle: {
                type: Object,
                default: () => ({
                    backgroundColor: '#F8F8F8'
                })
            }
        },
        data() {
            return {
                // 表头配置弹框
                tableHeaderConfig: false,
                // 表单数据
                form: {
                    columns: []
                }
            }
        },
        watch: {
          'tableColumns': {
              handler(newVal) {
                  this.form.columns = [...newVal]
              },
              deep: true
          }
        },
        methods: {
            /** 列表选择事件 */
            handleRowSelectChange(sele) {
                this.$emit('selection-change', sele)
            },
            /** 点击表头配置 */
            openConfigDialog() {
                this.tableHeaderConfig = true
                this.form.columns = [...this.tableColumns]
            },
            /** 添加新配置 */
            addNewConfig() {
              this.form.columns.push({label: '', prop: '', id: nanoid()})
            },
            /** 删除表头配置 */
            deleteColumn(item) {
                const index = this.form.columns.indexOf(item)
                if (index != -1) this.form.columns.splice(index, 1)
            },
            /** 点击对话框确认按钮 */
            finishConfig() {
                this.$emit('table-header-config', this.form.columns)
                this.tableHeaderConfig = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .custom-table-container {

    }
</style>
